<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物流跟踪</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        .tracking-step {
            position: relative;
        }
        .tracking-step:not(:last-child)::after {
            content: '';
            position: absolute;
            left: 11px;
            top: 40px;
            width: 2px;
            height: 40px;
            background: #e5e7eb;
        }
        .tracking-step.completed:not(:last-child)::after {
            background: #10b981;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-green-500 to-teal-500 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="notifications.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">物流跟踪</h1>
                <button onclick="shareTracking()" class="text-white">
                    <i class="fas fa-share text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Package Status -->
        <div class="px-4 py-3 bg-gradient-to-r from-green-500 to-teal-500">
            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-3">
                <div class="flex items-center text-white">
                    <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-truck text-white text-lg"></i>
                    </div>
                    <div class="flex-1">
                        <p class="font-medium">运输中</p>
                        <p class="text-sm opacity-80">预计今天 18:00 前送达</p>
                    </div>
                    <div class="text-right">
                        <p class="text-sm font-medium">还剩2站</p>
                        <p class="text-xs opacity-80">约30分钟</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Package Info -->
        <div class="p-4 bg-white border-b-8 border-gray-100">
            <div class="flex items-center justify-between mb-3">
                <h3 class="font-semibold">包裹信息</h3>
                <button onclick="refreshTracking()" class="text-green-600 text-sm">
                    <i class="fas fa-sync-alt mr-1"></i>刷新
                </button>
            </div>
            
            <div class="space-y-2 text-sm">
                <div class="flex justify-between">
                    <span class="text-gray-600">快递单号</span>
                    <span id="tracking-number" class="font-medium">SF1234567890</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">快递公司</span>
                    <div class="flex items-center">
                        <div class="w-5 h-5 bg-red-500 rounded flex items-center justify-center mr-2">
                            <span class="text-white text-xs font-bold">SF</span>
                        </div>
                        <span>顺丰速运</span>
                    </div>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">寄件时间</span>
                    <span>2025-01-05 15:30</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">预计送达</span>
                    <span class="text-green-600">今天 18:00 前</span>
                </div>
            </div>
        </div>

        <!-- Delivery Address -->
        <div class="p-4 bg-white border-b-8 border-gray-100">
            <h3 class="font-semibold mb-3">收货信息</h3>
            
            <div class="flex items-start">
                <i class="fas fa-map-marker-alt text-green-500 mt-1 mr-3"></i>
                <div class="flex-1">
                    <div class="flex items-center mb-1">
                        <span class="font-medium mr-2">张先生</span>
                        <span class="text-sm text-gray-600">138****5678</span>
                    </div>
                    <p class="text-sm text-gray-600">北京市朝阳区望京街道望京SOHO T3座 2006室</p>
                </div>
            </div>
        </div>

        <!-- Delivery Progress -->
        <div class="p-4 bg-white border-b-8 border-gray-100">
            <h3 class="font-semibold mb-4">配送进度</h3>
            
            <div class="relative">
                <!-- Progress Bar -->
                <div class="flex justify-between mb-4">
                    <div class="flex flex-col items-center">
                        <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center text-white text-sm">
                            <i class="fas fa-check"></i>
                        </div>
                        <span class="text-xs text-green-600 mt-1">已发货</span>
                    </div>
                    <div class="flex-1 flex items-center px-2">
                        <div class="flex-1 h-1 bg-green-500 rounded"></div>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center text-white text-sm">
                            <i class="fas fa-truck"></i>
                        </div>
                        <span class="text-xs text-green-600 mt-1">运输中</span>
                    </div>
                    <div class="flex-1 flex items-center px-2">
                        <div class="flex-1 h-1 bg-gray-300 rounded"></div>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center text-gray-500 text-sm">
                            <i class="fas fa-home"></i>
                        </div>
                        <span class="text-xs text-gray-500 mt-1">派送中</span>
                    </div>
                    <div class="flex-1 flex items-center px-2">
                        <div class="flex-1 h-1 bg-gray-300 rounded"></div>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center text-gray-500 text-sm">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <span class="text-xs text-gray-500 mt-1">已送达</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tracking Timeline -->
        <div class="h-[calc(852px-480px)] overflow-y-auto">
            <div class="p-4 pb-28">
                <h3 class="font-semibold mb-4">物流轨迹</h3>
                
                <div class="space-y-4">
                    <!-- Current Status -->
                    <div class="tracking-step completed">
                        <div class="flex items-start">
                            <div class="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center mr-3 flex-shrink-0 mt-0.5">
                                <div class="w-2 h-2 bg-white rounded-full"></div>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-1">
                                    <p class="text-sm font-medium text-green-600">【北京朝阳】快件正在派送途中，快递员：李师傅，电话：186****5678</p>
                                    <span class="text-xs text-gray-500 whitespace-nowrap ml-2">17:15</span>
                                </div>
                                <p class="text-xs text-gray-500">预计30分钟内送达，请保持手机畅通</p>
                            </div>
                        </div>
                    </div>

                    <!-- Previous Step -->
                    <div class="tracking-step completed">
                        <div class="flex items-start">
                            <div class="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center mr-3 flex-shrink-0 mt-0.5">
                                <div class="w-2 h-2 bg-white rounded-full"></div>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-1">
                                    <p class="text-sm">【北京朝阳】快件到达朝阳望京营业点</p>
                                    <span class="text-xs text-gray-500 whitespace-nowrap ml-2">16:45</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Previous Step -->
                    <div class="tracking-step completed">
                        <div class="flex items-start">
                            <div class="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center mr-3 flex-shrink-0 mt-0.5">
                                <div class="w-2 h-2 bg-white rounded-full"></div>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-1">
                                    <p class="text-sm">【北京】快件离开北京转运中心，开往北京朝阳</p>
                                    <span class="text-xs text-gray-500 whitespace-nowrap ml-2">16:20</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Previous Step -->
                    <div class="tracking-step completed">
                        <div class="flex items-start">
                            <div class="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center mr-3 flex-shrink-0 mt-0.5">
                                <div class="w-2 h-2 bg-white rounded-full"></div>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-1">
                                    <p class="text-sm">【北京】快件到达北京转运中心</p>
                                    <span class="text-xs text-gray-500 whitespace-nowrap ml-2">15:50</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Original Step -->
                    <div class="tracking-step completed">
                        <div class="flex items-start">
                            <div class="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center mr-3 flex-shrink-0 mt-0.5">
                                <div class="w-2 h-2 bg-white rounded-full"></div>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-1">
                                    <p class="text-sm">【深圳】快件已发出</p>
                                    <span class="text-xs text-gray-500 whitespace-nowrap ml-2">15:30</span>
                                </div>
                                <p class="text-xs text-gray-500">商家：科技数码专营店</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="mt-6 space-y-3">
                    <button onclick="callDelivery()" class="w-full bg-green-500 text-white py-3 rounded-lg font-medium">
                        <i class="fas fa-phone mr-2"></i>联系快递员
                    </button>
                    <div class="grid grid-cols-2 gap-3">
                        <button onclick="reportProblem()" class="bg-gray-100 text-gray-700 py-3 rounded-lg font-medium">
                            <i class="fas fa-exclamation-triangle mr-2"></i>问题反馈
                        </button>
                        <button onclick="changeAddress()" class="bg-blue-100 text-blue-600 py-3 rounded-lg font-medium">
                            <i class="fas fa-map-marked-alt mr-2"></i>修改地址
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Get tracking number from URL parameter
        function getTrackingNumberFromUrl() {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get('tracking') || 'SF1234567890';
        }

        // Share tracking info
        function shareTracking() {
            const trackingNumber = getTrackingNumberFromUrl();
            if (navigator.share) {
                navigator.share({
                    title: '物流跟踪',
                    text: `快递单号: ${trackingNumber}\n状态: 运输中`,
                    url: window.location.href
                });
            } else {
                const tempInput = document.createElement('input');
                tempInput.value = `快递单号: ${trackingNumber}\n${window.location.href}`;
                document.body.appendChild(tempInput);
                tempInput.select();
                document.execCommand('copy');
                document.body.removeChild(tempInput);
                showToast('物流信息已复制到剪贴板');
            }
        }

        // Refresh tracking info
        function refreshTracking() {
            showToast('正在刷新物流信息...');
            
            // Simulate API call with loading state
            setTimeout(() => {
                showToast('物流信息已更新');
                // In real app, this would fetch latest tracking data
            }, 1500);
        }

        // Call delivery person
        function callDelivery() {
            if (confirm('联系快递员李师傅\n电话：186****5678\n\n确认拨打电话？')) {
                // In a real app, this would initiate a phone call
                alert('正在为您拨打快递员电话...\n请稍候');
            }
        }

        // Report problem
        function reportProblem() {
            const issues = [
                '包裹延误',
                '包裹破损',
                '地址错误',
                '快递员态度问题',
                '其他问题'
            ];
            
            const issueIndex = prompt('请选择问题类型：\n1. 包裹延误\n2. 包裹破损\n3. 地址错误\n4. 快递员态度问题\n5. 其他问题\n\n请输入序号(1-5):');
            
            if (issueIndex && issueIndex >= 1 && issueIndex <= 5) {
                const selectedIssue = issues[issueIndex - 1];
                alert(`问题反馈已提交\n问题类型: ${selectedIssue}\n\n客服将在24小时内联系您处理`);
                showToast('问题反馈已提交');
            }
        }

        // Change delivery address
        function changeAddress() {
            alert('修改收货地址\n\n注意事项：\n• 包裹已发出，修改地址可能产生额外费用\n• 需要联系快递员确认\n• 修改后可能延长配送时间\n\n是否继续？');
        }

        // Show toast message
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            const trackingNumber = getTrackingNumberFromUrl();
            document.getElementById('tracking-number').textContent = trackingNumber;
        });
    </script>
</body>
</html>